<template>
	<div id="home">
		<topbar title="首页"></topbar>
		<p>v-for 循环</p>
		<ul class="clear">
			<li v-for="key in items" @click="click">
				姓名：{{ key.name | add }},年龄：{{ key.age | round }}
			</li>
		</ul>
		<input v-model="message">
		<p>这是: {{ message }}</p>
		
		<p>Vue2.0子同级组件之间数据交互</p>
		
		<fChild></fChild>
		<sChild></sChild>
		
	</div>
</template>
<script>
	import topbar from "../components/topBar.vue";
	import sChild from "../components/secondChild.vue";
	import fChild from "../components/firstChild.vue";
	export default {
		name: 'home',
		//数据
		data() {
			return {
				items: [{
						name: '小明',
						age: 20.5
					},
					{
						name: '小红',
						age: 19.2
					}
				],
				message: '双向绑定',
				isshow: false,
				firstName: 'a',
				lastName: 'fei',
				fullName: 'a fei'
			}
		},
		//挂载主键
		components: {
			topbar,
			fChild,
			sChild
		},
		// 点击事件方法
		methods: {
			click: function(e) {
				alert(e.currentTarget.innerHTML);
			}
		},
		//过滤
		filters: {
			add: function(e) {
				return  e + "是个好孩子";
			},
			round: function (e) {
				return  Math.floor(e);
			}
		},
		computed: {
			msgTips: function(){
				return this.msg;
			},
		},
		//数据的变化。
		watch: {
			message: function (val) {
				alert("数据变化了");
			}
		},
		mounted: function(){
//			alert("mounted");
		},
		//刷新  和 keep-alive 一起用才有作用
		activated: function(){
//			alert("mounted");
		}
		
	}
</script>
<style lang="scss">
	@import url("../assets/css/index.css");
	#home {
		font-size: 0.4rem;
		li {
			width: 100%;
		}
		
	}
	
	
</style>